<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- 1.form代表整个表单 action属性表示收集好数据后提交的地址,#占位符表示提交到当前页 -->
    <form action="#">
        <!-- 2.表单里可以写各种表单控件,如:输入框、单选、多选等
        input的type值控制输入框的类型:
        text普通文本输入框 password 密码输入框
        radio单选 checkbox多选
        submit提交按钮 reset重置按钮 button普通按钮
        date日期 color颜色 range范围 file文件
        -->
        姓名:<input type="text" name="uname" placeholder="请输入姓名"> <br>
        <!-- value value属性本来就存在,用来保存控件的值,也可以通过value属性设置输入框的默认值 -->
        昵称:<input type="text" name="nickname1" value="rose"> <br>
        <!-- readonly只读 只能看 不能改 可以提交数据 -->
        昵称:<input type="text" name="nickname2" value="rose" readonly> <br>
        <!-- disabled禁用 可以看到值 但做不了任何操作 数据也无法提交 -->
        昵称:<input type="text" name="nickname3" value="rose" disabled> <br>
        <!-- maxlength设置输入框的最大输入长度 -->
        密码:<input type="password" maxlength="6" value="123456" name="pwd"> <br>
        <!-- 单/多选必须设置相同的name分到同一组！
         且需要给每个选项设置value值,否则提交的是on
         checked设置选项被默认选中 -->
        性别:
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="0" checked>女
        <br>
        爱好:
        <input type="checkbox" name="like" value="cy">抽烟
        <input type="checkbox" name="like" value="hj">喝酒
        <input type="checkbox" name="like" value="tt" checked>烫头
        <input type="checkbox" name="like" value="java" checked>学Java
        <br>
        生日:<input type="date" name="birthday"> <br>
        幸运色: <input type="color" name="lColor"> <br>
        缩放: <input type="range" name="scale"> <br>
        文件: <input type="file" name="file"> <br>
        <hr>
        喜欢的城市:
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option>
            <option value="wh">武汉</option>
            <option value="cc">长春</option>
        </select>
        <br>
        <input type="checkbox" id="ok">
        <label for="ok">我同意以上协议</label>
        <br>
        <label for="uu">关联文字</label>
        <input type="text" id="uu">
        <hr>
        <input type="submit" value="点我提交">
        <input type="reset" value="点我重置">
        <input type="button" value="普通按钮">
        <button>普通按钮</button>
    </form>
</body>
</html>